<!DOCTYPE html>

<html>
    
    <head>
        <meta charset=UTF-8>
        <title>HSL Example</title>
        
        <style>
            h1 {
                text-shadow: 1px 1px 2px #fff;
            }
            
            #target {
                margin-top: 20px;
                padding: 20px;
                width: 640px;
                height: 480px;
            }
        </style>
        
        <script>
            
            var $id         = function(id) { return document.getElementById(id); };
            var $query      = function(q)  { return document.querySelector(q); };
            var $queryAll   = function(q)  { return document.querySelectorAll(q); };
            var hslToString = function(h, s, l) {
                return "hsl(" + h + ", " + s + "%, " + l + "%)";
            };
            
            /**
             * 要素からhsl値を取得
             */
            var getElementHSL = function(elm)
            {
                var h = elm.querySelector(".hue").value;
                var s = elm.querySelector(".saturation").value;
                var l = elm.querySelector(".lightness").value;
                
                return hslToString(h, s, l);
            };
            
            /**
             * リフレッシュ
             */
            var refresh = function()
            {
                var fontTitle = $id("font-title");
                var backTitle = $id("back-title");
                var fontHSLStr= getElementHSL($id("font-color"));
                var backHSLStr= getElementHSL($id("back-color"));
                
                fontTitle.innerHTML = "Font - " + fontHSLStr;
                backTitle.innerHTML = "Back - " + backHSLStr;
                $id("target").style.color           = fontHSLStr;
                $id("target").style.backgroundColor = backHSLStr;
            };
            
            window.onload = function()
            {
                refresh();
                
                var e_rangeList = document.querySelectorAll("#color-form input[type=range]");
                for (var i=0, len=e_rangeList.length; i<len; ++i) {
                    e_rangeList[i].addEventListener("change", function(){
                        refresh();
                    }, false);
                }
            };
            
        </script>
    </head>
    <body>
        
        <h1 id="top">HSL Example</h1>
        <p>
            スライドを動かすと色が変化します.
        </p>
        
        <form id="color-form">
            <section>
                <table border=1>
                    <tr>
                        <th id="font-title">Font</th>
                        <th id="back-title">Back</th>
                    </tr>
                    <tr>
                        <td>
                            <table id="font-color">
                                <tr>
                                    <td>
                                        <label>Hue : </label>
                                    </td>
                                    <td>
                                        <input type="range" class="hue" value=0 max=360 />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>Saturation : </label>
                                    </td>
                                    <td>
                                        <input type="range" class="saturation" value=50 max=100 />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>Lightness : </label>
                                    </td>
                                    <td>
                                        <input type="range" class="lightness" value=100 max=100 />
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table id="back-color">
                                <tr>
                                    <td>
                                        <label>Hue : </label>
                                    </td>
                                    <td>
                                        <input type="range" class="hue" value=0 max=360 />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>Saturation : </label>
                                    </td>
                                    <td>
                                        <input type="range" class="saturation" value=50 max=100 />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>Lightness : </label>
                                    </td>
                                    <td>
                                        <input type="range" class="lightness" value=50 max=100 />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </section>
        </form>
        
        <div id="target">
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
            
            <p>
                あいうえお　かきくけこ　さしすせそ
            </p>
            <p>
                あいうえお　かきくけこ　さしすせそ
            </p>
            <p>
                あいうえお　かきくけこ　さしすせそ
            </p>
            
            <p>
                1 2 4 8 16 32 64 128 256 512 1024
            </p>
            <p>
                1 2 4 8 16 32 64 128 256 512 1024
            </p>
            <p>
                1 2 4 8 16 32 64 128 256 512 1024
            </p>
            
            <p>42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42</p>
            <p>42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42</p>
            <p>42 42 42 42 42 42 42 42 42 42 42 42 42 42 42 42</p>
        </div>
        
    </body>
</html>